
<template>
  <div class="form-design-setting-container">
    <el-form size="" label-width="100px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="输入提示">
            <el-select v-model="formComponent.writerPlaceholderType" placeholder="请选择">
              <el-option
                v-for="item in designOptions.writerPlaceholderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提示" v-if="formComponent.writerPlaceholderType == 1">
            <el-input v-model="formComponent.writerPlaceholder" placeholder="请输入填写区提示"></el-input>
          </el-form-item>
          <el-form-item label="宽度设置">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option
                v-for="item in designOptions.widthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="填写设置" name="1">
          <el-form-item label="高度设置">
            <template #label>
              <div class="slot-label">高度设置
                <PopoverTip :content="'更改填写者回答区域高度，单位：px'"/>
              </div>
            </template>
            <el-select v-model="formComponent.height" placeholder="请选择">
              <el-option
                v-for="item in designOptions.heightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="格式限制">
            <el-select v-model="formComponent.format" placeholder="请选择">
              <el-option
                v-for="item in designOptions.formatOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数字限制" v-if="formComponent.format == 1">
            <el-select v-model="formComponent.numFormat" placeholder="请选择">
              <el-option
                v-for="item in designOptions.numFormatOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字数限制">
            <el-select v-model="formComponent.wordsNumFormat" placeholder="请选择">
              <el-option
                v-for="item in designOptions.inputWordsNumFormatOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字数" v-if="formComponent.wordsNumFormat != 0">
            <el-input-number size="small" v-if="formComponent.wordsNumFormat != 0 && formComponent.wordsNumFormat != 4" v-model="formComponent.wordsNum" type="number" :max="formComponent.inputMaxWords"></el-input-number>
            <div v-else-if="formComponent.wordsNumFormat == 4">
              <el-input-number size="small" v-model="formComponent.wordsNumRange[0]" :min="0" type="number" placeholder="最小值"></el-input-number>
              至
              <el-input-number size="small" v-model="formComponent.wordsNumRange[1]" :min="0" type="number" placeholder="最大值"></el-input-number>
            </div>
          </el-form-item>
          <el-form-item label="重复提交">
            <template #label>
              <div class="slot-label">重复提交
                <PopoverTip :content="'勾选后，将不允许提交和已有数据重复的内容。如涉及“重名填写”等类似的收集场景，请勿开启该设置，以防填写者无法提交表单'"/>
              </div>
            </template>
            <el-switch v-model="formComponent.repeatedSubmit" inline-prompt active-text="允许" inactive-text="不允许" :active-value="1" :inactive-value="0"/>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";
const props = defineProps({
  formComponent: {
      type: Object,
  },
})
const tabs1 = ref('1')
const tabs2 = ref('1')
const formComponent = computed(()=>{return props.formComponent})
</script>

<style lang="scss" scoped>
</style>
